<template>
  <div>
    <Buildings v-show="!step" :buildings="buildings.filter(i => !i.publicareatype)" @ok="onSelectBuilding" />
    <div v-show="step == 1">
      <el-empty v-if="!buildingViews.length" />
      <el-container v-else>
        <el-aside width="80px" class="plane-left">
          <div v-for="(floor, floorIndex) in floors" :key="'floor' + floorIndex" class="left-row">
            <div class="floor-left">{{ floor }}层</div>
            <div class="floor-right" />
          </div>
        </el-aside>
        <el-main class="plane-right">
          <div v-for="(buildingView, buildingViewIndex) in buildingViews" :key="'buildingView' + buildingViewIndex" :style="{ width: (buildingView.unitType === 2 ? buildingView.table[0].length * 94 : 134) + 'px' }">
            <building-plane
              :key="'buildingView' + buildingViewIndex"
              :data="buildingView.table"
              :cell-width="buildingView.unitType === 2 ? 90 : 130"
              :cell-height="28"
              :fixed-width="true"
              :fixed-height="fixHeightUnitType.indexOf(buildingView.unitType) === -1"
              :extend-params="{ checkTableId: buildingView.checkTableId }"
              :style="{ height: floors.length > 0 ? floors.length * 32 + 'px' : '32px' }"
              @cellClick="onCellClick"
            />
            <div class="right-column-label">
              {{ buildingView.checkTableName }}
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
// 选择楼层
import { getPhysicalFloors } from '@/api/projectInspection/courseCheck'
import Buildings from './Buildings'
import BuildingPlane from '@/views/statement/components/BuildingPlane'
export default {
  name: 'Floors',
  components: { Buildings, BuildingPlane },
  props: {
    buildings: { type: Array, default: () => [] },
    step: { type: Number, default: 0 }
  },
  data() {
    return {
      fixHeightUnitType: [3, 4, 5, 6],
      building: {},
      listLoading: false,
      buildingViews: [],
      floors: []
    }
  },
  methods: {
    onSelectBuilding(data) {
      this.building = data.building
      this.$emit('update:step', 1)
      this.getFloorList()
    },
    async getFloorList() {
      const { building } = this

      this.listLoading = true
      const res = await getPhysicalFloors({ buildingId: building.fid }).catch(() => false)
      this.listLoading = false
      if (res === false) return (this.buildingViews = [])

      const data = res.data || []
      const floorTable = data.map(floor => ({ name: floor + '层', objectId: floor, status: 0 }))
      this.buildingViews = [{ checkTableName: building.fnameL2, unitType: 1, table: floorTable }]
      this.floors = data
    },
    // 平面单元点击事件处理
    onCellClick(data) {
      const { building } = this
      const position = {
        buildingId: building.fid,
        shortName: `${building.fnameL2}-${data.name}`,
        floor: data.objectId
      }
      this.$emit('ok', { position, building, floor: data })

      data.status = 10
      this.buildingViews[0].table.map(i => i.objectId !== data.objectId && (i.status = 0))
    }
  }
}
</script>
<style lang="scss" scoped>
.plane-left {
  background-color: #fff;
  padding: 0;
  margin: 0;
  flex: 0 0 80px;
  .left-row {
    width: 100%;
    color: #666;
    font-size: 14px;
    display: inline-flex;
    justify-items: center;
    align-items: center;
    height: 30px;
    justify-content: center;
    &:last-child .floor-right {
      border-bottom: 1px solid #666;
    }
  }
  .floor-left {
    text-align: center;
    color: #666;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    width: 55px;
  }
  .floor-right {
    border-top: 1px solid #666;
    border-left: 1px solid #666;
    width: 5px;
    height: 32px;
  }
}
.plane-right {
  padding: 0;
  display: flex;
  .right-column-label {
    font-size: 14px;
    text-align: center;
  }
}
</style>
